<template>
  <div class="body">
    <van-nav-bar title="疫情数据" />
    <!-- 标题 -->
    <div class="title">
      <div><img src="/head_title.png" alt="" /></div>
      <p>数据来源：国家及各地卫健委每日信息发布</p>
    </div>

    <!-- 公告 -->

    <!-- 滚动导航 -->
    <van-tabs
      v-model="active"
      color="#1074FF"
      title-active-color="#1074FF"
      line-width="56px"
      scrollspy
      sticky
      border
    >
      <van-tab class="vantab" title="国内疫情">
        <!-- 更新时间 -->
        <p class="update_time" v-if="lastUpdateTime">
          统计截至 <span>{{ lastUpdateTime }}</span>
          <!-- 更新于<span>12分钟</span>前 -->
        </p>
        <!-- 统计数据 -->
        <van-row class="recent_number" v-if="sixpart">
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.localConfirmH5 }}</span>
            </div>
            <div class="number">{{ sixpart.localConfirm }}</div>
            <div class="text">本土现有确诊</div>
          </van-col>
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.nowConfirm }}</span>
            </div>
            <div class="number">{{ sixpart.nowConfirm }}</div>
            <div class="text">现有确诊</div>
          </van-col>
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.confirm }}</span>
            </div>
            <div class="number">{{ sixpart.confirm }}</div>
            <div class="text">累计确诊</div>
          </van-col>
        </van-row>
        <van-row class="recent_number2" v-if="sixpart">
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.noInfect }}</span>
            </div>
            <div class="number">{{ sixpart.noInfect }}</div>
            <div class="text">无症状感染者</div>
          </van-col>
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.importedCase }}</span>
            </div>
            <div class="number">{{ sixpart.importedCase }}</div>
            <div class="text">境外输入</div>
          </van-col>
          <van-col>
            <div class="add">
              较上日<span>{{ sixpartadd.dead }}</span>
            </div>
            <div class="number">{{ sixpart.dead }}</div>
            <div class="text">累计死亡</div>
          </van-col>
        </van-row>

        <!-- 疫苗 -->
        <div class="vaccine" v-if="vaccineData != null">
          <div class="va_title">国内新冠疫苗接种追踪</div>
          <van-row type="flex" justify="center">
            <van-col :span="8">
              <p class="va_name">累计接种</p>
              <p class="va_num" style="color: #178b50">
                {{ vaccineData.total_vaccinations }}<span>亿剂</span>
              </p>
            </van-col>
            <van-col :span="8">
              <p class="va_name">较上日新增</p>
              <p class="va_num" style="color: #e57631">
                {{ vaccineData.new_vaccinations }}<span>万剂</span>
              </p>
            </van-col>
            <van-col :span="8">
              <p class="va_name">每百人接种</p>
              <p class="va_num" style="color: #4e5a65">
                {{ vaccineData.total_vaccinations_per_hundred }}<span>剂</span>
              </p>
            </van-col>
          </van-row>
        </div>

        <!-- 近期31省本土病例 -->
        <div
          class="local_patient"
          v-if="firstStatisGradeCityDetail.length != 0"
        >
          <div class="local_title">近期31省区市本土病例</div>
          <div class="local_table">
            <div class="local_head">
              <div>城市(区)</div>
              <div>省市区</div>
              <div>新增</div>
              <div>现有确诊</div>
              <div>区域风险</div>
            </div>
            <div class="local_body">
              <div
                class="local_body_item"
                v-for="(item, index) in firstStatisGradeCityDetail"
                :key="index"
              >
                <div>{{ item.city }}</div>
                <div>{{ item.province }}</div>
                <div :class="{ active_color: item.confirmAdd > 0 }">
                  {{ item.confirmAdd }}
                </div>
                <div>{{ item.nowConfirm }}</div>
                <div style="width: 26.133vw">{{ item.grade }}</div>
              </div>
              <!-- <div class="local_body_item">
                <div>宁波</div>
                <div>浙江</div>
                <div>+12</div>
                <div>23</div>
                <div>部分中风险</div>
              </div> -->
            </div>
            <div class="loadmore" @click="loadMore" v-show="loadMoreShow">
              <span>展开更多</span>
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="mapandbutton">
          <!-- 切换数据按钮 -->
          <div class="confirm_btns">
            <button
              style="margin-right: 2px"
              :class="{ confirmactivecolor: confirmflag }"
              @click="switchConfirm(0)"
            >
              现有确诊
            </button>
            <button
              :class="{ confirmactivecolor: !confirmflag }"
              @click="switchConfirm(1)"
            >
              累计确诊
            </button>
          </div>
          <!--疫情地图 -->
          <div id="china_map"></div>
        </div>

        <!-- 折线图 -->
        <div id="chinalinechart"></div>
        <div class="linechart_btns">
          <button
            style="margin-right: 1px"
            :class="{ linectivecolor: lineflag }"
            @click="switchLineChart1"
          >
            本土新增确诊趋势
          </button>
          <button
            style="margin-left: 1px"
            :class="{ linectivecolor: !lineflag }"
            @click="switchLineChart2"
          >
            本土现有确诊趋势
          </button>
        </div>

        <!-- 全国现有确诊 -->
        <div id="chinanowchart" v-show="chinalineflag"></div>
        <div id="chinanowchart2" v-show="!chinalineflag"></div>
        <div class="chinalinechart_btns">
          <button
            style="margin-right: 1px"
            :class="{ linectivecolor: chinalineflag }"
            @click="switchChinaChart1"
          >
            全国现有确诊趋势
          </button>
          <button
            style="margin-right: 1px"
            :class="{ linectivecolor: !chinalineflag }"
            @click="switchChinaChart2"
          >
            全国疫情新增趋势
          </button>
        </div>
      </van-tab>
      <van-tab class="vantab" title="实时播报">
        <div class="real_tell">实时播报</div>
        <div class="real_broadcast">
          <div
            class="data_click"
            v-for="(item, index) in broadcastList"
            :key="index"
          >
            <div class="data_line">
              <span class="data_line_circle"></span>
            </div>
            <div class="data_content">
              <div class="data_time">
                {{
                  moment.unix(item.time/1000).format("YYYY年MM月DD日 HH:mm")
                }}
              </div>
              <a :href="item.article.url">
                <div class="data_news">{{ item.title }}</div>
              </a>
            </div>
          </div>
        </div>
        <!-- 预防须知 -->
        <div class="shouldknow">
          <div class="should_title">新冠肺炎预防须知</div>
          <div class="should_content">
            <div>
              <p style="font-size: 3.733vw">个人清洁</p>
              <p>经常保持双手清洁，尤其在触摸口、鼻或眼之前。</p>
              <p>经常用洗手液和清水清洗双手，搓手最少20秒，并用纸巾擦干。</p>
              <p>
                打喷嚏或咳嗽时应用纸巾掩盖口鼻，把用过的纸巾弃置于有盖垃圾箱内，然后彻底清洁双手。
              </p>
            </div>
            <div>
              <p style="font-size: 3.733vw">尽量避免</p>
              <p>减少前往人流密集的场所。如不可避免，应戴上外科口罩。</p>
              <p>
                避免到访医院。如有必要到访医院，应佩戴外科口罩及时刻注重个人和手部卫生。
              </p>
              <p>
                避免接触动物（包括野味）、禽鸟或其粪便；避免到海鲜、活禽市场或农场。
              </p>
              <p>切勿进食野味及切勿光顾有提供野味的餐馆。</p>
              <p>
                注意食物安全和卫生，避免进食或饮用生或未熟透的动物产品，包括奶类、蛋类和肉类。
              </p>
            </div>
            <div>
              <p style="font-size: 3.733vw">尽快就诊</p>
              <p>
                如有身体不适，特别是有发烧或咳嗽，应戴上外科口罩并尽快就诊。
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <tabber></tabber>
  </div>
</template>

<script>
import Tabber from "../components/Tabber.vue";
require("echarts/map/js/china");
let options = {
  series: [
    {
      type: "map",
      map: "china",
      data: [],
      label: {
        show: true,
        color: "black",
        fontSize: 10,
      },
      zoom: 1.25,
      itemStyle: {
        borderColor: "gray",
      },
      emphasis: {
        label: {},
        itemStyle: {},
      },
    },
  ],
  tooltip: {
    trigger: "item",
    formatter: "地区：{b}<br/>确诊：{c}",
  },
  visualMap: [
    {
      // 区域显示颜色
      type: "piecewise",
      show: true,
      // splitNumber: 4,
      pieces: [
        { min: 10000 },
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
        { max: 1 },
      ],
      inRange: {
        // 区域图标样式
        symbol: "rect",
        color: [
          "#f2f5f8",
          "#ffcea0",
          "#ffa577",
          "#ff6341",
          "#ff2736",
          "#de1f05",
        ],
      },
    },
  ],
};
export default {
  components: { Tabber },
  data() {
    return {
      active: 0, //滚动导航初始激活index
      chinachart: "",
      recentAddNumber: 0,
      vaccineData: null,
      // statisGradeCityDetail: [],
      firstStatisGradeCityDetail: [],
      loadMoreShow: true,
      newData: null, //新的疫情数据
      sixpart: null, //这是6块数据
      sixpartadd: null, //6块数据相比于昨天
      lastUpdateTime: "", //最近更新时间
      mapData: [], // 地图现有确诊数
      confirmflag: true, //控制确诊切换按钮
      originMapData: [], //这是原始的地图数据
      confirmTrendencyList: [], //本土新增确诊趋势
      chinalinechart: "", //本土新增确诊
      lineflag: true, //切换确诊折线图按钮
      chinanowchart: "", //全国现有确诊
      chinalineflag: true, //切换全国确诊折线图按钮
      broadcastList: [],
    };
  },
  mounted() {
    this.chinachart = this.$echarts.init(document.getElementById("china_map"));
    this.chinalinechart = this.$echarts.init(
      document.getElementById("chinalinechart")
    );
    this.chinanowchart = this.$echarts.init(
      document.getElementById("chinanowchart")
    );
    this.getVaccineData();
    this.getGradeCityDetail();
    this.getNewData();
    this.getConfirmTrendency();
    this.getChinaConfirm();
    this.getBroadcastNews();
  },
  methods: {
    // 这是新的疫情数据接口（准确！）
    getNewData() {
      let url = "newdata/g2/getOnsInfo?name=disease_h5";
      this.axios
        .get(url)
        .then((res) => {
          console.log(11111);
          console.log(res);
          console.log(22222);
          let newdata = JSON.parse(res.data.data);
          // console.log(newdata);
          // 获取6块数据
          this.sixpart = newdata.chinaTotal;
          // 获取6块较昨日变化数据
          this.sixpartadd = newdata.chinaAdd;
          //将>0的数据前面加+
          for (const i in this.sixpartadd) {
            if (this.sixpartadd[i] >= 0) {
              this.sixpartadd[i] = "+" + this.sixpartadd[i];
            }
          }
          //拿到最近更新时间
          this.lastUpdateTime = newdata.lastUpdateTime;
          // 给地图赋值
          let map = newdata.areaTree[0].children;
          this.originMapData = newdata.areaTree[0].children;
          map.forEach((item) => {
            this.mapData.push({
              name: item.name,
              value: item.total.nowConfirm,
            });
          });
          options.series[0].data = this.mapData;
          this.chinachart.setOption(options);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取疫苗数据
    getVaccineData() {
      let url =
        "https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTopData";
      this.axios
        .get(url)
        .then((res) => {
          // console.log(res.data.data.VaccineTopData['中国']);
          this.vaccineData = res.data.data.VaccineTopData["中国"];
          this.vaccineData.new_vaccinations = parseFloat(
            this.vaccineData.new_vaccinations / 10000
          );
          this.vaccineData.total_vaccinations = parseFloat(
            this.vaccineData.total_vaccinations / 100000000
          ).toFixed(1);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取近期31省本土病例
    getGradeCityDetail() {
      let url =
        "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail";
      this.axios
        .post(url)
        .then((res) => {
          // console.log(res.data.data.statisGradeCityDetail);
          this.getGradeCityDetail = res.data.data.statisGradeCityDetail;
          this.getGradeCityDetail.forEach((item, index) => {
            if (item.confirmAdd > 0) {
              item.confirmAdd = "+" + item.confirmAdd;
            }
            if (index < 7) {
              this.firstStatisGradeCityDetail.push(item);
            }
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //点击加载更多
    loadMore() {
      this.firstStatisGradeCityDetail = this.getGradeCityDetail;
      this.loadMoreShow = false;
    },
    //控制确诊切换按钮
    switchConfirm(value) {
      this.confirmflag = !this.confirmflag;
      this.mapData = [];
      let switchbtn = value == 0 ? "nowConfirm" : "confirm";
      this.originMapData.forEach((item) => {
        this.mapData.push({
          name: item.name,
          value: item.total[switchbtn],
        });
      });
      options.series[0].data = this.mapData;
      this.chinachart.setOption(options);
    },
    // 获取本土新增确诊趋势
    getConfirmTrendency() {
      let url =
        "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare";
      this.axios
        .get(url)
        .then((res) => {
          // console.log(res.data.data);
          this.confirmTrendencyList = res.data.data;
          let xdata = [],
            ydata = [];
          this.confirmTrendencyList.chinaDayAddList.forEach((item, index) => {
            xdata.push(item.date);
            ydata.push(item.localConfirmadd);
          });
          let options = {
            grid: { bottom: 30 },
            title: {
              text: "本土新增确诊趋势",
              x: "left",
              textStyle: {
                fontSize: 14,
              },
            },
            xAxis: [
              {
                type: "category",
                axisLabel: {
                  fontSize: 8,
                  fontStyle: "italic",
                },
                axisLine: { show: false },
                axisTick: { show: false },
                data: [],
              },
            ],
            yAxis: {
              type: "value",
              axisLabel: {
                fontSize: 8,
                fontStyle: "italic",
              },
              axisLine: { show: false },
              axisTick: { show: false },
            },
            tooltip: {
              trigger: "axis",
              formatter: "{b}<br/>本土新增确诊：{c}",
            },
            series: [
              {
                data: [],
                type: "line",
                smooth: true,

                lineStyle: {
                  color: "#E57631",
                },
              },
            ],
          };
          options.xAxis[0].data = xdata;
          options.series[0].data = ydata;
          this.chinalinechart.setOption(options);
        })
        .catch((err) => {});
    },
    switchLineChart1() {
      this.lineflag = true;
      this.getConfirmTrendency();
    },
    switchLineChart2() {
      this.lineflag = false;
      let xdata = [],
        ydata = [];
      this.confirmTrendencyList.chinaDayList.forEach((item, index) => {
        xdata.push(item.date);
        ydata.push(item.localConfirm);
      });
      let options = {
        title: {
          text: "本土现有确诊趋势",
        },
        xAxis: [
          {
            type: "category",
            data: [],
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 8,
            fontStyle: "italic",
          },
          axisLine: { show: false },
          axisTick: { show: false },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b}<br/>本土现有确诊：{c}",
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#C23531",
            },
          },
        ],
      };
      options.xAxis[0].data = xdata;
      options.series[0].data = ydata;
      this.chinalinechart.setOption(options);
    },
    // 全国现有确诊
    getChinaConfirm() {
      let url =
        "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare";
      this.axios
        .get(url)
        .then((res) => {
          let confirmTrendencyList = res.data.data;
          let xdata = [],
            ydata = [];
          confirmTrendencyList.chinaDayList.forEach((item, index) => {
            xdata.push(item.date);
            ydata.push(item.nowConfirm);
          });
          let options = {
            grid: { bottom: 30 },
            title: {
              text: "全国现有确诊趋势",
              x: "left",
              textStyle: {
                fontSize: 14,
              },
            },
            legend: {
              icon: "rectangle",
              itemWidth: 15,
              left: "left",
              top: 20,
            },
            xAxis: [
              {
                type: "category",
                axisLabel: {
                  fontSize: 8,
                  fontStyle: "italic",
                },
                axisLine: { show: false },
                axisTick: { show: false },
                data: [],
              },
            ],
            yAxis: {
              type: "value",
              axisLabel: {
                fontSize: 8,
                fontStyle: "italic",
              },
              axisLine: { show: false },
              axisTick: { show: false },
            },
            tooltip: {
              trigger: "axis",
              formatter: "{b}<br/>全国现有确诊：{c}",
            },
            series: [
              {
                name: "现有确诊",
                data: [],
                type: "line",
                smooth: true,
                itemStyle: { color: "#FF7B7C" },
                lineStyle: {
                  color: "#FF7B7C",
                },
              },
            ],
          };
          options.xAxis[0].data = xdata;
          options.series[0].data = ydata;
          this.chinanowchart.setOption(options);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    switchChinaChart1() {
      this.chinalineflag = true;
      this.getChinaConfirm();
    },
    switchChinaChart2() {
      this.chinalineflag = false;
      let url =
        "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare";
      this.axios
        .get(url)
        .then((res) => {
          let confirmTrendencyList = res.data.data;
          let xdata = [],
            ydata = [],
            ydata2 = [];
          confirmTrendencyList.chinaDayAddList.forEach((item, index) => {
            xdata.push(item.date);
            ydata.push(item.suspect);
            ydata2.push(item.confirm);
          });
          let options = {
            grid: { bottom: 30 },
            title: {
              text: "全国疫情新增趋势",
              x: "left",
              textStyle: {
                fontSize: 14,
              },
            },
            legend: {
              icon: "rectangle",
              itemWidth: 15,
              left: "left",
              top: 20,
            },
            xAxis: [
              {
                type: "category",
                axisLabel: {
                  fontSize: 8,
                  fontStyle: "italic",
                },
                axisLine: { show: false },
                axisTick: { show: false },
                data: [],
              },
            ],
            yAxis: {
              type: "value",
              axisLabel: {
                fontSize: 8,
                fontStyle: "italic",
              },
              axisLine: { show: false },
              axisTick: { show: false },
            },
            tooltip: {
              trigger: "axis",
              // formatter: "{b}<br/>全国现有确诊：{c}",
            },
            series: [
              {
                name: "疑似",
                data: [],
                type: "line",
                smooth: true,
                itemStyle: { color: "#FFD661" },
                lineStyle: {
                  color: "#FFD661",
                },
              },
              {
                name: "确诊",
                data: [],
                type: "line",
                smooth: true,
                lineStyle: {
                  color: "#E65561",
                },
              },
            ],
          };
          options.xAxis[0].data = xdata;
          options.series[0].data = ydata;
          options.series[1].data = ydata2;
          this.$echarts
            .init(document.getElementById("chinanowchart2"))
            .setOption(options);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 疫情实时播报
    getBroadcastNews() {
      let url =
        "https://m.sm.cn/api/rest?format=json&method=Huoshenshan.feed&type=latest";
      this.axios
        .get(url)
        .then((res) => {
          // console.log(res.data.data);
          this.broadcastList = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.title {
  height: 35.8vw;
  margin-top: -2px;
  background: url(/head_bg_new.png) no-repeat center;
  background-size: 100%;
  text-align: center;
  img {
    width: 50%;
    margin-top: 30px;
  }
  p {
    font-size: 3.2vw;
    color: #fff;
  }
}
.van-tabs {
  width: 100%;
  margin: 0 auto;
}
/deep/.van-tab--active {
  font-weight: bold;
}
.vantab {
  width: 90%;
  font-size: 3.2vw;
  margin: 10px auto;
}

.recent_number,
.recent_number2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  .van-col {
    flex: 1;
    margin: 1px 1px;
    .add {
      font-size: 2.667vw;
      margin-top: 10px;
      color: #7c7c7c;
    }
    .number {
      font-weight: 600;
      font-size: 5.867vw;
    }
    .text {
      color: #222;
      font-size: 3.733vw;
      margin-bottom: 10px;
    }
  }
}
.recent_number {
  .van-col:nth-child(1) {
    background-color: #fffaf7;
    span,
    .number {
      color: #e57631;
    }
  }
  .van-col:nth-child(2) {
    background-color: #fff8f8;
    span,
    .number {
      color: #e61c1d;
    }
  }
  .van-col:nth-child(3) {
    background-color: #fff4f4;
    span,
    .number {
      color: #be2121;
    }
  }
}
.recent_number2 {
  .van-col:nth-child(1) {
    background-color: #fef7ff;
    span,
    .number {
      color: #ae3ac6;
    }
  }
  .van-col:nth-child(2) {
    background-color: #f1f5ff;
    span,
    .number {
      color: #4e8be6;
    }
  }
  .van-col:nth-child(3) {
    background-color: #f3f6f8;
    span,
    .number {
      color: #4e5a65;
    }
  }
}

.vaccine {
  margin-top: 3vw;
  border-radius: 1.6vw;
  border: 1px solid #efefef;
  .va_title {
    margin: 3.733vw 3.733vw 0;
    font-size: 3.733vw;
  }
  .van-row {
    align-items: center;
    .van-col {
      text-align: center;
      .va_name {
        font-size: 2.933vw;
        margin-bottom: 1vw;
      }
      .va_num {
        font-size: 5.333vw;
        font-weight: 700;
        margin: 1vw 2vw auto;
        margin-bottom: 2vw;
        span {
          font-size: 2.933vw;
        }
      }
    }
  }
}
.local_patient {
  .local_title {
    margin-top: 3vw;
    font-size: 4.267vw;
    font-weight: 600;
    color: #222;
  }
  .local_table {
    .local_head {
      display: flex;
      margin-top: 2.667vw;
      font-size: 3.2vw;
      text-align: center;
      div {
        flex: 1;
        background-color: #eef4ff;
        height: 8.533vw;
        line-height: 8.533vw;
        margin: 0 1px;
        color: #4180f1;
      }
    }
    .local_body {
      .local_body_item {
        display: flex;
        text-align: center;
        div {
          flex: 1;
          line-height: 4.267vw;
          padding: 2.933vw 0;
          border-bottom: 1px solid #f5f5f5;
        }
        .active_color {
          color: #ff7f7f;
        }
      }
    }
    .loadmore {
      text-align: center;
      margin: 2vw auto;
      span {
        position: relative;
        &:before {
          content: ".";
          font-size: 0;
          position: absolute;
          display: block;
          width: 2.4vw;
          height: 1.6vw;
          right: -3.5vw;
          top: 30%;
          background: url(/icon_bt_more.png);
          background-size: 100% 100%;
        }
      }
    }
  }
}
#china_map {
  margin-top: 3vw;
  height: 96vw;
}
.shouldknow {
  margin-top: 4vw;
  margin-bottom: 16vw;
  .should_title {
    font-size: 4.8vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3vw;
  }
  .should_content {
    border-radius: 1.6vw;
    background-color: #f8f8f8;
    padding: 1vw 0 1vw 4vw;
  }
}
.mapandbutton {
  position: relative;
  .confirm_btns {
    position: absolute;
    z-index: 999;
    button {
      outline: none;
      border-radius: 4px;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #efefef;
    }
    .confirmactivecolor {
      background-color: #eef4ff;
      border-color: #ccdeff;
      color: #005dff;
    }
  }
}
#chinalinechart {
  margin-top: 3vw;
  height: 64vw;
  border: 1px solid #efefef;
}
.linechart_btns {
  display: flex;
  margin-top: 3vw;
  font-size: 3.2vw;
  button {
    flex: 1;
    // margin: 0 1px;
    outline: none;
    border-radius: 4px;
    background-color: #f3f6f8;
    padding: 5px;
    border: 1px solid #efefef;
    height: 9.867vw;
  }
  .linectivecolor {
    background-color: #eef4ff;
    border-color: #ccdeff;
    color: #005dff;
  }
}
#chinanowchart,
#chinanowchart2 {
  margin-top: 3vw;
  height: 64vw;
  border: 1px solid #efefef;
}
.chinalinechart_btns {
  display: flex;
  margin-top: 3vw;
  font-size: 3.2vw;
  button {
    flex: 1;
    // margin: 0 1px;
    outline: none;
    border-radius: 4px;
    background-color: #f3f6f8;
    padding: 5px;
    border: 1px solid #efefef;
    height: 9.867vw;
  }
  .linectivecolor {
    background-color: #eef4ff;
    border-color: #ccdeff;
    color: #005dff;
  }
}
.real_tell {
  font-size: 4.267vw;
  color: #222;
  font-weight: 600;
  margin-top: 6vw;
}
.real_broadcast {
  // height: 190vw;
  margin-top: 5vw;
  // border: 1px solid red;
  .data_click {
    position: relative;
    // height: 20vw;
    display: flex;
    overflow: hidden;
    .data_line {
      position: relative;
      left: 1.5vw;
      width: 1px;
      // height: 100%;
      background-color: #eee;
      .data_line_circle {
        position: absolute;
        left: -1.7vw;
        width: 1.8vw;
        height: 1.8vw;
        border-radius: 50%;
        border-color: #cfeff0;
        border: 1vw solid #cfeff0;
        background-color: #1074ff;
      }
    }
    .data_content {
      width: 100%;
      margin-left: 6vw;

      .data_time {
        font-size: 3.5vw;
        color: #999;
      }
      a {
        color: #222;
        .data_news {
          margin-top: 2vw;
          margin-bottom: 4.5vw;
          font-size: 4vw;
          padding: 2vw 2vw;
          border-radius: 1vw;
          font-weight: 700;
          background-color: #f5f6f7;
        }
      }
    }
  }
}
</style>